知道如何控制視角位置後，今天我們來替這個過程加上過渡動畫！
那在 Camera 的部分也是有相關的 Event 可以使用，一起來用抗抗吧～

(其實我也是昨天在打鐵人賽找文章的時候才發現的（￣□￣；）)

過渡動畫

雖然我列了 3 個，但有過渡動畫的只有 easeTo 和 flyTo，它們很像彼此的進化體所以就一起介紹了～ 絕對不是因為強迫症

這邊統一以 A 點代表舊位置，B 點代表新的位置說明

• jumpTo(options, eventData)：沒有過渡動畫，從 A 跳到 B (就是這麼白話)
• easeTo(options, eventData)：有過渡動畫，從 A 移動到 B
• flyTo(options, eventData)：有過渡動畫，從 A 以飛行的曲線動畫過渡到 B

ex. 從預設經緯度飛到指定經緯度並做縮放：

map.flyTo({
  center: [120, 23.5],
  zoom: 9,
});

通常我都使用 flyTo 去做過渡，有曲線動畫真的舒服很多！(不信可以去試試看啦)

Event

跟 Camera 有關的事件不多，既然不多就可以稍微放上來介紹一下了 :D

• pitchstart：地圖傾斜時觸發
• pitch：地圖傾斜的過渡期間觸發
• pitchend：地圖傾斜後觸發

ex. 地圖發生傾斜後，跳出小視窗：

map.on('pitchend', () => {
  alert('A pitchend event occurred.');
});

Application

Camera 介紹到這邊，來動手做吧！
在官網看到一個很酷的範例，拿來修改了一下：

ex. 利用鍵盤的上下左右控件導航地圖

const map = new mapboxgl.Map ({
  container: this.mapContainer.current,
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [lng, lat],
  zoom: zoom,
  bearing: 12,
  pitch: 60, 
  interactive: false
});

// pixels the map pans when the up or down arrow is clicked
const deltaDistance = 100;

// degrees the map rotates when the left or right arrow is clicked
const deltaDegrees = 25;  

map.on('load', () => {
  map.getCanvas().focus();

  map.getCanvas().addEventListener(
    'keydown',
    (e) => {
      e.preventDefault();
      if (e.which === 38)                         // up
        map.panBy([0, -deltaDistance])
      else if (e.which === 40)                    // down
        map.panBy([0, deltaDistance])
      else if (e.which === 37)                    // left
        map.easeTo({
          bearing: map.getBearing() - deltaDegrees,
        })
      else if (e.which === 39)                    // right
        map.easeTo({
          bearing: map.getBearing() + deltaDegrees,
        })
    },  
    true
  );
});

稍微解釋一下這段 code 在做什麼：

1. 在初始化地圖的時候設定好預設的視角，並把 interactive 關掉 (就是你用滑鼠點地圖還幹嘛的 Mapbox 都不會理你)
2. deltaDistance 和 deltaDegrees 設置好每次移動或轉動的值
3. getCanvas 獲取地圖元素，並給予焦點 (focus()) 和監聽 (addEventListener)
4. 監聽「上下左右」鍵，並做相應的反應
   • 上、下：平移地圖 (panBy)
   • 左、右：旋轉地圖 (bearing)，並用 easeTo 做過渡效果

地圖輸出：

移動的話在自己去玩看看嘍～

Github 完整程式碼

看起來要過第二個禮拜了，趁現在告一個小段落所以明天來做一個小 Demo，雖然我還沒想到要做些什麼哈哈 ...

應該不會開天窗吧 ...( ´•̥̥̥ω•̥̥̥` )

Reference

• Navigate the map with game-like controls
• Camera｜Mapbox
• Event｜Mapbox
• getCanvas｜Mapbox